<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <div id="app">
    <select name="" id="" v-model="prov" @change="changeCityList">
        <option value="">----------q-请选择-----------</option>
        <option v-for="item in provList" :value="item.code">{{item.name}}</option>
    </select>省
    <select name="" id="" v-model="city" @change="changeXianList">
        <option value="">----------q-请选择-----------</option>
        <option v-for="item2 in cityList" :value="item2.code">{{item2.name}}</option>
    </select>市区
    <select name="" id="" v-model="xian">
        <option value="">----------q-请选择-----------</option>
        <option v-for="item3 in xianList" :value="item3.code">{{item3.name}}</option>
    </select>县
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    {{city}}
    {{city}}
    </div>
    
</body>
<script type="module">
  import { createApp,ref,reactive,onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  import { areaData } from './js/myData.js'

  createApp({
    setup() {
      let currentArea = areaData;
      let cityListall;
        const  prov = ref('')
        const  city = ref('')
        const  xian = ref('')
        const provList = ref([])
        const cityList = ref([])
        const xianList = ref([])

        const changeCityList = function() { 

          xianList.value = []; 
          city.value = '';
          xian.value = '';
          // console.log('++++++');
          currentArea.forEach(provv => {
            if(provv.code == prov.value){
              console.log(provv.city);
              cityListall = provv.city;
               cityList.value= provv.city;
            }
          }); 
        }

        const  changeXianList = function() { 
          // console.log('++++++');
            cityListall.forEach(fdas => {
              if(fdas.code == city.value){
                console.log(fdas.area);
                xianList.value = fdas.area;
              }
            });
        }
        
        onMounted(() => {
          let currentArea = areaData;
          console.log(currentArea);
           provList.value  = currentArea;
        

})

        

      return {
        prov,city,xian,provList,cityList,xianList,changeCityList,changeXianList
      }
    }
  }).mount('#app')
  </script>
</html>